//<feature charts>
Ext.define('AkData.view.HTBoyamaKG', {
    extend: 'Ext.Panel',
    requires: ['Ext.chart.Chart', 'Ext.chart.interactions.PanZoom', 'Ext.chart.series.Bar', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'Ext.carousel.Carousel'],
    config: {
        //cls: 'card1',
		//layout: 'fit',
		//fullscreen: true,

		layout: 'vbox',
		
        items: [
            {
                xtype: 'toolbar',
				id: 'HTBoyamaKG_toolbar',
                //cls: 'charttoolbar',
                //top: 0,
                //right: 0,
                //zIndex: 50,
				docked: 'top',
				centered: true,
                //style: {background: 'red'},
				items: [
					{
                        text: 'Tip 1',
						disabled: true,
						id: 'htboyamakg_buton_tip1',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function (button) {
							//this.callParent();
							
							Ext.getCmp('HTBoyamaKG_ID1').setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').setHidden(false);
							button.setDisabled(true);
							Ext.getCmp('htboyamakg_buton_tip2').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip3').setDisabled(false);
							
							Ext.getCmp('HTBoyamaKG_Grid').setHidden(true);
							
							Ext.getCmp('HTBoyamaKG_ID1').getLegend().setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').getLegend().setHidden(false);
							/*
							Ext.getCmp('HTBoyamaKG_ID1').setLegend(null);
							Ext.getCmp('HTBoyamaKG_ID2').setLegend({docked: 'bottom'});
							*/
							//Ext.getCmp('HTBoyamaKG_ID1').redraw(true);
							//Ext.getCmp('HTBoyamaKG_ID2').redraw(true);
                        }
                    },
					{
                        text: 'Tip 2',
						id: 'htboyamakg_buton_tip2',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function (button) {
							
							//AkData.view.HTBoyamaKG.chart1();
							
							Ext.getCmp('HTBoyamaKG_ID1').setHidden(false);
							Ext.getCmp('HTBoyamaKG_ID2').setHidden(true);
							button.setDisabled(true);
							Ext.getCmp('htboyamakg_buton_tip1').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip3').setDisabled(false);
							
							Ext.getCmp('HTBoyamaKG_Grid').setHidden(true);
							
							Ext.getCmp('HTBoyamaKG_ID1').getLegend().setHidden(false);
							Ext.getCmp('HTBoyamaKG_ID2').getLegend().setHidden(true);
							
							/*
							Ext.getCmp('HTBoyamaKG_ID1').setLegend({docked: 'bottom'});
							Ext.getCmp('HTBoyamaKG_ID2').setLegend(null);
							*/
							
							//Ext.getCmp('HTBoyamaKG_ID1').redraw(true);
							//Ext.getCmp('HTBoyamaKG_ID2').redraw(true);
                        }
                    },
					{
						text: 'Tip 3',
						id: 'htboyamakg_buton_tip3',
						style: {'background': '#E8E8E8', 'color': 'black'},
						handler: function (button) {
							Ext.getCmp('HTBoyamaKG_ID1').setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').setHidden(true);
							
							//legend: {docked: 'bottom'},
							
							button.setDisabled(true);
							Ext.getCmp('htboyamakg_buton_tip1').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip2').setDisabled(false);
							
							Ext.getCmp('HTBoyamaKG_Grid').setHidden(false);
							
							Ext.getCmp('HTBoyamaKG_Grid').setHeight('100%');
							//Ext.getCmp('HTBoyamaKG_Grid').setFlex(1);
							
							Ext.getCmp('HTBoyamaKG_ID1').getLegend().setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').getLegend().setHidden(true);
							/*
							Ext.getCmp('HTBoyamaKG_ID1').setLegend(null);
							Ext.getCmp('HTBoyamaKG_ID2').setLegend(null);
							*/
							//Ext.getCmp('HTBoyamaKG_ID1').redraw(true);
							//Ext.getCmp('HTBoyamaKG_ID2').redraw(true);
                        }
                    },
					/*
					{
                        text: 'Tip 3',
						hidden: true,
						id: 'htboyamakg_buton_tip3',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function (button) {
							
							Ext.getCmp('HTBoyamaKG_ID1').setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').setHidden(false);
							button.setDisabled(true);
							Ext.getCmp('htboyamakg_buton_tip1').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip2').setDisabled(false);
							Ext.getCmp('htboyamakg_buton_tip4').setDisabled(false);
							
							Ext.getCmp('HTBoyamaKG_Grid').setHidden(false);
							Ext.getCmp('HTBoyamaKG_Grid').setHeight(150);
							
							Ext.getCmp('HTBoyamaKG_ID1').getLegend().setHidden(true);
							Ext.getCmp('HTBoyamaKG_ID2').getLegend().setHidden(false);
							
							//Ext.getCmp('HTBoyamaKG_ID1').redraw(true);
							//Ext.getCmp('HTBoyamaKG_ID2').redraw(true);
                        }
                    },
					*/
                    {
                        iconCls: 'refresh',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function () {
							Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
							Ext.getStore('HTBoyamaKG_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
                        }
                    },
					/*
					{
						text: '...',
                        handler: function () {
							Ext.getCmp('HTBoyamaKG_toolbar').hide();
							Ext.getCmp('mainNavigationBar').hide();
							
							//alert(Ext.Viewport.getWindowWidth() + ' x ' + Ext.Viewport.getWindowHeight());
							//alert(Ext.Viewport.Android.determineOrientation());
							//alert(Ext.Viewport.determineOrientation());
                        }
                    },
					*/
					
				]
            },
			{
				flex: 1,
                xtype: 'chart',
                store: 'HTBoyamaKG_Store',
                background: 'white',
				animate: true,
				hidden: false,
				id: 'HTBoyamaKG_ID2',
                colors: AkData.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1}),
				legend: {docked: 'bottom',},
				//flipXY: true,
                series: [
                    {
                        type: 'bar',
                        xField: 'hafta',
                        yField: ['havlu', 'bukle', 'kadife', 'diger'],
						title: ['Havlu', 'Bukle', 'Kadife', 'Diğer'],
                        stacked: false,
						//style: {stroke: '#000000', /*maxBarWidth: 90*/},
						style: {maxBarWidth: 40},
						
						//gutter: 2,
						//groupGutter: 1,
						
						highlightCfg: {
							fillStyle: '#FFF',
						},
						
						label: {
							//display: 'insideEnd', 
							field: ['havlu', 'bukle', 'kadife', 'diger'],
							
							//renderer: function (text) {
								////return Ext.util.Format.number(text, '0,000.00');
								//if (text % 2 == 0) {return '(' + text + ')'}
							//}
							
						}
                    }
                ],
				
				interactions: [
					//{type: 'panzoom', /*zoomOnPanGesture: true*/}, //{type: 'itemhighlight'},
					//'panzoom', 'itemhighlight',
					{
						type: 'iteminfo',
						//bubbleEvents: 'Test',
						panel: {height: 200, items: [{docked: 'top', xtype: 'toolbar', title: 'Bilgi'}]},
						//{modal: true, centered: true, width: 250, height: 300, styleHtmlContent: true, scrollable: 'vertical', hideOnMaskTap: true, fullscreen: false, hidden: true, zIndex: 30, items: [{docked: 'top', xtype: 'toolbar', title: 'Item Detail'}]}
						listeners: {
							show: function(me, item, panel) {
								//panel.getDockedItems()[0].setTitle("Ayrıntılar.");
								//panel.setHtml('Düz Boyama: %' + item.record.get('duzboyama') + '<br \>' + 'HT Boyama: %' + item.record.get('htboyama'));
								panel.setHtml(
								'<ul>' + 
								'<li><b>Hafta: </b>' + item.record.get('hafta') + '</li>' + 
								'<li><b>Havlu: </b>' + item.record.get('havlu') + '</li>' + 
								'<li><b>Bukle: </b>' + item.record.get('bukle') + '</li>' + 
								'<li><b>Kadife: </b>' + item.record.get('kadife') + '</li>' + 
								'<li><b>Diğer: </b>' + item.record.get('diger') + '</li>' + 
								'</ul>');
							}
						}	
					}
				],
				
                axes: [
                    {
                        type: 'numeric',
                        position: 'left',
                        fields: ['havlu', 'bukle', 'kadife', 'diger'],
						grid: {
							odd: {opacity: 1, fill: '#ddd', stroke: '#bbb', lineWidth: 1}
						},
						label: {/*rotate: {degrees: -30},*/ fontSize: 9}
						//title: {text: 'Haftalık Üretimler', fontSize: 15}
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        fields: 'hafta',
						//visibleRange: [0, 2],
						//title: {text: 'Haftalar', fontSize: 15}
                    }
                ]
            },
			{
				flex: 1,
                xtype: 'chart',
                store: 'HTBoyamaKG_Store',
                background: 'white',
				hidden: true,
				id: 'HTBoyamaKG_ID1',
                colors: AkData.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1}),
				legend: {docked: 'bottom', hidden: true, /*minHeight: 60,*/},
				flipXY: true,
                series: [
                    {
                        type: 'bar',
                        xField: 'hafta',
                        yField: ['havlu', 'bukle', 'kadife', 'diger'],
						//title: ['Havlu<br>Kumaşları', 'Bukle<br>Kumaşları', 'Kadife<br>Kumaşları', 'Diğer<br>Kumaşlar'],
						title: ['Havlu', 'Bukle', 'Kadife', 'Diğer'],
                        stacked: false,
						//style: {stroke: '#000000', /*maxBarWidth: 90*/},
						style: {maxBarWidth: 40},
						
						//gutter: 2,
						//groupGutter: 1,
						
						highlightCfg: {
							fillStyle: '#FFF',
						},
						
						label: {
							//display: 'insideEnd', 
							field: ['havlu', 'bukle', 'kadife', 'diger'],
							
							//renderer: function (text) {
								////return Ext.util.Format.number(text, '0,000.00');
								//if (text % 2 == 0) {return '(' + text + ')'}
							//}
							
						}
                    }
                ],
				
				interactions: [
					//{type: 'panzoom', /*zoomOnPanGesture: true*/}, //{type: 'itemhighlight'},
					//'panzoom', 'itemhighlight',
					{
						type: 'iteminfo',
						//bubbleEvents: 'Test',
						panel: {height: 200, items: [{docked: 'top', xtype: 'toolbar', title: 'Bilgi'}]},
						//{modal: true, centered: true, width: 250, height: 300, styleHtmlContent: true, scrollable: 'vertical', hideOnMaskTap: true, fullscreen: false, hidden: true, zIndex: 30, items: [{docked: 'top', xtype: 'toolbar', title: 'Item Detail'}]}
						listeners: {
							show: function(me, item, panel) {
								//panel.getDockedItems()[0].setTitle("Ayrıntılar.");
								//panel.setHtml('Düz Boyama: %' + item.record.get('duzboyama') + '<br \>' + 'HT Boyama: %' + item.record.get('htboyama'));
								panel.setHtml(
								'<ul>' + 
								'<li><b>Hafta: </b>' + item.record.get('hafta') + '</li>' + 
								'<li><b>Havlu: </b>' + item.record.get('havlu') + '</li>' + 
								'<li><b>Bukle: </b>' + item.record.get('bukle') + '</li>' + 
								'<li><b>Kadife: </b>' + item.record.get('kadife') + '</li>' + 
								'<li><b>Diğer: </b>' + item.record.get('diger') + '</li>' + 
								'</ul>');
							}
						}	
					}
				],
				
                axes: [
                    {
                        type: 'numeric',
                        position: 'bottom',
                        fields: ['havlu', 'bukle', 'kadife', 'diger'],
						grid: {
							odd: {opacity: 1, fill: '#ddd', stroke: '#bbb', lineWidth: 1}
						},
						label: {/*rotate: {degrees: -30},*/ fontSize: 9}
						//title: {text: 'Haftalık Üretimler', fontSize: 15}
                    },
                    {
                        type: 'category',
                        position: 'left',
                        fields: 'hafta',
						label: {rotate: {degrees: -90}, fontSize: 9},
						//visibleRange: [0, 2],
						//title: {text: 'Haftalar', fontSize: 15}
                    }
                ]
            },
			{
				//flex: 2,
                xtype: 'grid',
                store: 'HTBoyamaKG_Store',
				titleBar: false,
				hidden: true,
				id: 'HTBoyamaKG_Grid',
				
				height: 150,
				
                //title: 'Düz Boyama (MT)',
                headerContainer: {
                    height: 30,
					//width: '100%',
                },
				itemHeight: 30,
				style: 'font-size: 11px;',
				
				//masked: false,
				
				masked: {xtype: 'loadmask', message: _lang_Yukleniyor},
				
                columns: [
					{
						text: 'Hafta',
						dataIndex: 'hafta',
						width: '28%',
						style: 'line-height: 30px;',
						sortable: false,
					},
					{
						text: 'Havlu',
						dataIndex: 'havlu',
						width: '18%',
						style: 'line-height: 30px;',
						sortable: false,
					},
					{
						text: 'Bukle',
						dataIndex: 'bukle',
						width: '18%',
						style: 'line-height: 30px;',
						sortable: false,
					},
					{
						text: 'Kadife',
						dataIndex: 'kadife',
						width: '18%',
						style: 'line-height: 30px;',
						sortable: false,
					},
					{
						text: 'Diğer',
						dataIndex: 'diger',
						width: '18%',
						style: 'line-height: 30px;',
						sortable: false,
					}
				]
            }
			/*
			{
				flex: 1,
                xtype: 'list',
				itemTpl: '{hafta} {saten} {gabardin} {poplin} {diger}',
				store: 'DuzBoyamaMT_Store',
            }
			*/
        ]
    },
	
    initialize: function () {
		this.callParent();
		
		var task = Ext.create('Ext.util.DelayedTask', function() {
			Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
			Ext.getStore('HTBoyamaKG_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
		}, this);

		task.delay(500);
    },
	
	statics: {
        chart1: function () {
			alert("test");
		}
    }
});
//</feature>
